<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <style>
    /*.row{
      background: #000000;
      margin-bottom: 2rem;
    }
    .row div{
      background: #399;
      border:1px solid #000000;
    }*/

  </style>
</head>
<body>
<!--复选框、单选框按钮 -->
<div class="container">
  <div class="row">
    <div class="col">复选</div>
  </div>
  <div class="row">
    <div class="col">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-secondary active">
          <input type="checkbox" checked autocomplete="off">体育
        </label>
        <label class="btn btn-secondary">
          <input type="checkbox" autocomplete="off"> 唱歌
        </label>
        <label class="btn btn-secondary">
          <input type="checkbox" autocomplete="off"> 睡觉
        </label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">单选</div>
  </div>
  <div class="row">
    <div class="col">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-secondary active">
          <input type="radio" name="options" id="option1" autocomplete="off" checked> 男
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option2" autocomplete="off"> 女
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option3" autocomplete="off"> 妖
        </label>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>

</body>
</html>